<template>
<div class="tab">
    <el-tag 
    v-for=" (tag,index) in tabs"
    :key="tag.name"
    :closable="tag.name !== 'home'"
    :effect="$route.name === tag.name ? 'dark' : 'plain'"
    @click="changeMenu(tag)"
    @close="handleClose(tag,index)"
    size="samll"
    >
    {{tag.label}}
    </el-tag>
</div>
  
</template>

<script>
import { mapState } from 'vuex'
export default {
        name:'CommonTags',
        data() {
            return {
                
            }
        },
        computed:{
             ...mapState({
            tabs:state => state.tab.tabsList
            }),
        },
        methods:{
        
            changeMenu(item){
                this.$router.push({
                    name: item.name
                })
            },
            handleClose(tag,index){     
                const length = this.tabs.length-1;
                this.$store.commit('closeTags',tag)
                if(tag.name !== this.$route.name) return;
                if(index === length){
                    console.log(this.tabs[index-1].path);
                    this.$router.push(this.tabs[index-1].path)
                }else{
                   this.$router.push(this.tabs[index].path)
                }
            }
        }
}
</script>

<style lang="less" scoped>
.tab{
    padding: 20px;
    .el-tag{
        margin-left: 10px;
        cursor: pointer;
    }
}
</style>